<template>
  <div class="nav_outer">
    <Header tooltext="保存" @herttool="saveresume">我的简历</Header>
    <div class="content">
       <div class="edits">
         <div class="edit" @click="upload" v-if="isInapp">
           <div class="edit_title">头像</div>
           <div class="edit_conten">
             <img :src="user.actor | imgpre" alt="" class="ava">
           </div>
         </div>
         <div class="edit" v-if="!isInapp">
           <div class="edit_title">头像</div>
           <div class="edit_conten">
             <div style="position:relative;display:inline-block;">
               <img :src="user.actor | imgpre" alt="" class="ava">
               <input type="file" class="upload_input" multiple="false" accept="image/*" @change="changeImage($event)"/>
             </div>
           </div>
         </div>
         <div class="edit">
           <div class="edit_title">姓名</div>
           <div class="edit_conten">
             <input type="text" v-model="user.name">
           </div>
         </div>
         <div class="edit" @click="chooseDate">
           <div class="edit_title">出生日期</div>
           <div class="edit_conten">
            <div class="oheight">{{ user.birth  | splidate}}</div>
           </div>
         </div>
         <div class="edit" @click="chooseSex">
           <div class="edit_title">性别</div>
           <div class="edit_conten oheight">
             <span>{{ ['','男','女'][user.gender] }}</span>
           </div>
         </div>
         <div class="edit">
           <div class="edit_title">籍贯</div>
           <div class="edit_conten">
             <input type="text" placeholder="请输入" v-model="user.nativePlace">
           </div>
         </div>
         <div class="edit">
           <div class="edit_title">民族</div>
           <div class="edit_conten">
             <input type="text" placeholder="请输入" v-model="user.nation">
           </div>
         </div>
         <div class="edit">
           <div class="edit_title">身高</div>
           <div class="edit_conten">
             <input type="text" placeholder="请输入" v-model="user.height">
           </div>
         </div>
         <div class="edit">
           <div class="edit_title">体重</div>
           <div class="edit_conten">
             <input type="text" placeholder="请输入" v-model="user.weight">
           </div>
         </div>
       </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/commonComponents/Header'
export default {
  data() {
    return {
      user:{
        name:'',
        birth:'',
        gender: '',
        genderName:'',
        nativePlace:'',
        nation: '',
        height: '',
        weight: '',
        actor: ''
      },
      isInapp: this.app.isInAPP
    }
  },
  created(){
    let user = this.$store.state.user;
    for(var key in this.user){
      this.user[key]=user[key];
    }
  },
  mounted() {
    let mui = this.mui;
    this.picker = new mui.PopPicker();
    this.dtPicker = new mui.DtPicker({type:'date',beginYear: 1950,endYear: 2030}); 
    this.sexpicker = new mui.PopPicker();
    this.sexpicker.setData([{value:'1',text:'男'},{value:'2',text:'女'}]);
  },
  methods: {
    loadUser() {
      this.Http.get("/yzj/current-customer", null).then(res => {
        this.$store.commit('SETUSER', res);
        localStorage.removeItem("user");
        localStorage.setItem("user",JSON.stringify(res));
      });
    },
    saveresume(){
      let birth = this.user.birth;
      this.Http.put(`/yzj/personal/app/customer`,this.user).then((res)=>{
        this.loadUser();
        this.$router.go(-1);
      })
    },
    chooseDate(){
      let that = this;
      this.dtPicker.show(function (selectItems) { 
        that.user.birth = selectItems.value+' 00:00:00';
      })
    },
    chooseSex(){
      let that = this;
      this.sexpicker.show(function (selectItems) {
        that.user.gender = selectItems[0].value;
        that.user.genderName = selectItems[0].text;
      });
    },
    upload(){
      let that = this;
      this.app.upload().then((res)=>{
        that.user.actor = res;
      })
    },//非APP使用原生的上传
    changeImage (e) {
      let that = this;
      let files = e.target.files || e.dataTransfer.files
      if (!files.length) return
      this.Http.orginupload(files[0]).then((res)=>{
        that.user.actor = res;
      })
    }
  },
  components: {
    Header
  }
}
</script>

<style scoped lang='scss'>
  @function px2em($px) {
    @if (unitless($px)) {
      @return px2em($px + 0px);
    } @else if (unit($px) == em) {
      @return $px;
    }
    @return ($px / 75px) * 1rem;
  }
  body{
      background: #F5F5F5!important;
  }
  .content{
    color: #666;
    .ava{
      width: px2em(96);
      height: px2em(96);
      background: #ccc;
      border-radius: 50%;
      display: inline-block;
    }
    .upload_input{
      position: absolute;
      width: px2em(96);
      height: px2em(96);
      left: 0;
      top: 0;
      opacity: 0;
    }
    .edit{
      margin-top: px2em(10);
      background: #fff;
      display: flex;
      align-items: center;
      padding: px2em(16) px2em(28);
      .edit_conten{
        flex: 1;
        margin-left: 15px;
        text-align: right;
      }
      input{
        text-align: right;
        color: #333;
        font-size: 0.9em;
        padding-right: 0;
        &::-webkit-input-placeholder{
          color: #999;
        }
      }
    }
  }
  .oheight{
    height:40px;
    line-height: 40px;
  }
</style>